// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_BREADCRUMBS.SCSS
// -----------------------------------------------------------------------------
// Styling for breadcrumb navigation to show users where they are within the
// site. Not intended for primary navigation. Keep their use succinct.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
// =============================================================================

// Base Styles
// =============================================================================

.x-breadcrumb-wrap {
  overflow: hidden;
  margin: 0;
  padding: 16px 0;
  @include font-size(1.2);
  line-height: 1.4;
  background-color: $baseModBackground;

  a {
    color: lighten($textColor, 25%);

    &:hover {
      color: $linkColor;
    }
  }
}

.x-breadcrumbs {
  float: left;
  width: 85%;
  @include break(middle-bear) {
    float: none;
    width: 100%;
    text-align: center;
  }

  .delimiter {
    position: relative;
    margin: 0 0.45em 0 0.65em;
    // margin: 0 1.15em;

    // i {
    //   color: transparent;
    // }

    // &:before,
    // &:after {
    //   content: "";
    //   display: block;
    //   position: absolute;
    //   left: -21px;
    //   width: 40px;
    //   height: 1px;
    //   background-color: #dfdfdf;
    // }

    // &:before {
    //   top: -11px;
    //   @include rotate(65deg);
    // }

    // &:after {
    //   bottom: -12px;
    //   @include rotate(-65deg);
    // }
  }

  .current {
    color: $headingsColor;
  }
}